<template>
	<view>
		<view class="box" :class="{wrapper: isMsg, 'wrapper-msg': !isMsg}" v-if="info.type!=='afterSales'">
			<view v-if="isMsg" style="position: absolute;right: 20rpx;top: 0rpx;font-size: 40rpx;" @click="delCard">
				<u-icon name="close" size="30"></u-icon>
			</view>
			<view class="left-img flex flex-ai-c" v-if='info.imgSrc'>
				<image :src="info.imgSrc" mode="" class='img'></image>
				<view v-if="!isMsg" class="name" style="margin-left: 20rpx;font-weight: bold;">{{info.name}}</view>
			</view>
			<view class="rights">
				<view v-if="isMsg" class="name">{{info.name}}</view>
				<view class="info">
					<view class="payment flex">
						<view style="margin-right: 20rpx;" v-if="info.payment||info.payment===0"><text style="letter-spacing: 24rpx;">月</text>供：<text
							class="price">{{info.payment | million}}</text></view>
						<view v-if="info.monthly||info.monthly===0">首付：<text class="price">{{info.monthly | million}}</text>
						</view>
					</view>
					<view class='label-price' v-if='isMsg && info.imgSrc'>指导价：{{info.price}}</view>
					<view v-else class="payment">指导价：{{info.price}}</view>
				</view>
				<view style="position: absolute;right: 10rpx;bottom: 10rpx;">
					<view class='btn' v-if='isMsg' @click="sendCardMsg">发送</view>
				</view>
			</view>
			
			
		</view>
		
		<!-- 维保 -->
		<view class="box" style="position: relative;" :class="{after: isMsg, 'after2': !isMsg}" v-if="info.type==='afterSales'">
			<view v-if="isMsg" style="position: absolute;right: 20rpx;top: 0rpx;font-size: 40rpx;" @click="delCard">
				<u-icon name="close" size="30"></u-icon>
			</view>
			<view class="flex flex-ai-c">
				<view>
					<image class="img" :src="info.imgSrc"></image>
				</view>
				<view class="after-list">
					<view class="after-name">维保商品/服务订单</view>
					<view class="after-list-text">{{info.subName}}</view>
					<view class="after-list-text flex flex-ai-c">
						<view style="margin-right: 10rpx;">小计：<text class="price">￥{{info.price}}</text></view>
						<!-- <view>已优惠￥{{Math.abs(info.discounts)}}</view> -->
					</view>
					<!-- <view class="after-list-text" v-else>
						<view style="margin-right: 10rpx;">小计：<text class="price">￥{{info.price}}</text></view>
						<view>已优惠￥{{Math.abs(info.discounts)}}</view>
					</view> -->
				</view>
			</view>
		</view>
		<view style="position: absolute;right: 10rpx;bottom: 10rpx;">
			<view class='btn' v-if='isMsg' @click="sendCardMsg">发送</view>
		</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		props: {
			isMsg: { //是否显示为卡片
				type: Boolean,
				default: false,
			},
			info: {
				type: Object,
				default () {
					return {
						imgSrc: '',
						name: '',
						price: '0.00',
						labelPrige: '0.00',
					}
				}
			},
		},
		filters: {
			million(value) { //过万处理
				let num
				if (value > 9999) { //大于9999显示x.xx万
					num = ((value / 1000) / 10).toFixed(2) + '万'
				} else if (value <= 9999 && value >= -9999) {
					num = value + '元'
				} else if (value < -9999) { //小于-9999显示-x.xx万
					num = -((Math.abs(value) / 1000) / 10).toFixed(2) + '万'
				}
				return num
			}
		},
		methods: {
			delCard(){
				setTimeout(() => {
					this.$emit('del')
				}, 1)
				
			},
			sendCardMsg() {
				setTimeout(() => {
					this.$emit('sendCard')
				}, 1)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.btn {
		width: 140rpx;
		height: 56rpx;
		line-height: 56rpx;
		text-align: center;
		border-radius: 28rpx;
		background: linear-gradient(-90deg, #FDD421, #FFE23E);
		color: #333;
		font-size: 28rpx;
		font-weight: 500;
	}
	.after2{
		width: 570rpx;
		border-radius: 20rpx;
		image{
			margin-right: 20rpx;
			width: 120rpx;
			height: 120rpx;
			border-radius: 10rpx;
		}
		.after-list{
			
			&-text{
				color: #999999;
				font-size: 20rpx;
			}
		}
		
		&-name{
			display: -webkit-box;
			overflow: hidden;
			text-overflow: ellipsis;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			font-weight: bold;
			font-size: 28rpx;
		}
	}
	.price {
		font-size: 28rpx;
		color: #EB5C02;
		font-weight: bold;
	}
	
	.info {

		/* display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between; */

		.label-price {
			font-size: 24rpx;
			color: #999;
			font-weight: 500;
			// padding-left: 20rpx;
		}


	}

	.payment {
		color: #999999;
		font-size: 24rpx;
		margin: 20rpx 0;
	}

	//维保
	.after{
		width: 700rpx;
		padding: 22rpx;
		border-radius: 8rpx;
		
		.img {
			margin-right: 20rpx;
			width: 146rpx;
			height: 103rpx;
			border-radius: 10rpx;
		}
		.after-list{
			
			&-text{
				color: #999999;
				font-size: 20rpx;
			}
		}
		
		&-name{
			display: -webkit-box;
			overflow: hidden;
			text-overflow: ellipsis;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			font-weight: bold;
			font-size: 28rpx;
		}
	}
	//发送卡片
	.wrapper {
		display: flex;
		flex-direction: row;
		width: 700rpx;
		border-radius: 8rpx;

		.left-img {
			// width: 100%;
			// width: 156rpx;
			// height: 146rpx;
			// margin-right: 23rpx;

			.img {
				margin-right: 20rpx;
				width: 146rpx;
				height: 103rpx;
				border-radius: 10rpx;
			}
		}
	}

	//聊天链接
	.wrapper-msg {
		width: 570rpx;
		border-radius: 20rpx;

		.left-img {
			// width: 100%;
			// width: 73rpx;
			// height: 73rpx;

			.img {
				width: 73rpx;
				height: 73rpx;
			}
		}
	}

	.box {

		padding: 22rpx;
		// display: flex;
		// flex-direction: row;
		background-color: #fff;

		.rights {
			// width: 100%;
			font-size: 28rpx;
			color: #333;
			// display: flex;
			// flex-direction: column;
			// justify-content: space-between;
			// overflow: hidden;

			.name {
				// white-space: nowrap;
				display: -webkit-box;
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				font-weight: bold;
			}
		}
	}
</style>
